<template>
  <template v-for="(x, id) in UIList">
    <!-- 轮播图 -->
    <UiSwiper
      v-if="x.type === 'widget_swiper' || x.type === 'widget_slideshow'"
      :key="'Swiper' + id + uuid()"
      :cfg="x"
    />
    <!-- ？？ -->
    <UiCols
      v-else-if="x.type === 'widget_cols'"
      :key="'Cols' + id + uuid()"
      :cfg="x"
    />
    <!-- 表单 -->
    <XModalForm
      v-else-if="x.type === 'widget_form'"
      :id="x.data"
      :key="'XForm' + id + uuid()"
      :cfg="x"
      @unmount="closeUI(x)"
    />
    <!-- 分享海报 -->
    <PosterView
      v-else-if="x.type === 'widget_poster'"
      :key="'Poster' + id + uuid()"
      :cfg="x"
      @unmount="closeUI(x)"
    />
    <!-- 字幕 -->
    <UiSubtitle
      v-else-if="x.type === 'widget_subtitle'"
      :key="'Subtitle' + id + uuid()"
      :cfg="x"
    />
    <!-- 分支卡片 -->
    <UiBranchNode
      v-else-if="x.type === 'widget_branch'"
      :key="'Branch' + id + uuid()"
      :cfg="x"
    />
    <!-- 图片视频 -->
    <UiCard
      v-else
      :key="'Other' + id + uuid()"
      :data="x"
    />
  </template>
</template>

<script
  lang="ts"
  setup
  name="UiEventCard"
>
import { useUIStore } from '@/store/ui'
import { uuid } from '@/utils/random'

const UIStore = useUIStore()
const UIList = computed(() => UIStore.container as any)
const closeUI = (item) => {
  UIStore.delUI(item.axis_id)
}
</script>
